<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片列表</title>

<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/list.css">

<link rel="stylesheet" type="text/css" href="css/demostyle.css">

<style>
/*需要根据实际需求定义*/
.bl-imglist{ margin-top:-12px; margin-right:-12px;}
.bl-imglist .inner{ margin-right:12px;}

.bl-imglist li{ margin-top:12px;}

.des{ color:#666;}
.bl-imglist .ia{ border-color:red;}

.imglist-diy1{ margin-right:-12px;}
.imglist-diy1 li{ width:140px;}
.imglist-diy1 .inner{ margin-right:12px;}
</style>

</head>

<body>
<div class="demobox">
	<div class="h3">图片列表<small>无文字</small></div>
    <ul class="bl-imglist imglist-3col">
    	<li><a href="#" class="inner"><img src="demopic/p1.jpg"></a></li>
        <li><a href="#" class="inner"><img src="demopic/p2.jpg"></a></li>
        <li><a href="#" class="inner"><img src="demopic/p3.jpg"></a></li>
    </ul>
    
    <div class="h3">图片列表<small>有标题文字</small></div>
    <ul class="bl-imglist imglist-3col">
    	<li>
            <a href="#" class="inner">
                <img src="demopic/p1.jpg">
                <strong>图片列表图片列表图片列表图片列表</strong>
            </a>
        </li>
        <li>
            <a href="#" class="inner">
                <img src="demopic/p1.jpg">
                <strong>图片列表</strong>
            </a>
        </li>
        <li>
            <a href="#" class="inner">
                <img src="demopic/p1.jpg">
                <strong>图片列表</strong>
            </a>
        </li>
    </ul>
    
    <div class="h3">图片列表<small>有标题有描述</small></div>
    <ul class="bl-imglist imglist-3col">
    	<li>
            <a href="#" class="inner">
                <img src="demopic/p1.jpg">
                <strong>图片列表图片列表图片列表图片列表</strong>
                <p class="des">描述放a标签里面</p>
            </a>
        </li>
        <li>
            <a href="#" class="inner">
                <img src="demopic/p1.jpg">
                <strong>图片列表</strong>
                <p class="des">描述放a标签里面</p>
            </a>
        </li>
        <li>
            <a href="#" class="inner">
                <img src="demopic/p1.jpg">
                <strong>图片列表</strong>
                <p class="des">描述放a标签里面</p>
            </a>
        </li>
        <li>
            <a href="#" class="inner">
                <img src="demopic/p1.jpg">
                <strong>图片列表图片列表图片列表图片列表</strong>
                <p class="des">描述放a标签里面</p>
            </a>
        </li>
        <li>
            <a href="#" class="inner">
                <img src="demopic/p1.jpg">
                <strong>图片列表</strong>
                <p class="des">描述放a标签里面</p>
            </a>
        </li>
        <li>
            <a href="#" class="inner">
                <img src="demopic/p1.jpg">
                <strong>图片列表</strong>
                <p class="des">描述放a标签里面</p>
            </a>
        </li>
    </ul>
    
    <div class="h3">图片列表<small>标题描述拆开写，如果图片要加边线需要把 图片和标题 拆成两个链接来写</small></div>
    <ul class="bl-imglist imglist-3col">
    	<li>
        	<div class="inner">
                <a href="#" class="ia"><img src="demopic/p1.jpg"></a>
                <a href="#"><strong>图片列表图片列表图片列表图片列表</strong></a>
                <p class="des">描述放a标签里面</p>
            </div>
        </li>
        <li>
        	<div class="inner">
                <a href="#" class="ia"><img src="demopic/p1.jpg"></a>
                <a href="#"><strong>图片列表图片列表图片列表图片列表</strong></a>
                <p class="des">描述放a标签里面</p>
            </div>
        </li>
        <li>
        	<div class="inner">
                <a href="#" class="ia"><img src="demopic/p1.jpg"></a>
                <a href="#"><strong>图片列表图片列表图片列表图片列表</strong></a>
                <p class="des">描述放a标签里面</p>
            </div>
        </li>
    </ul>
    
    <div class="h3">图片列表<small>非等分列</small></div>
    <ul class="bl-imglist imglist-diy1">
    	<li><a href="#" class="inner"><img src="demopic/p1.jpg"></a></li>
        <li><a href="#" class="inner"><img src="demopic/p2.jpg"></a></li>
        <li><a href="#" class="inner"><img src="demopic/p3.jpg"></a></li>
        <li><a href="#" class="inner"><img src="demopic/p1.jpg"></a></li>
        <li><a href="#" class="inner"><img src="demopic/p2.jpg"></a></li>
    </ul>

	<div class="bl-pagination">
        <span class="prev">上一页</span><span class="current">1</span><a>2</a><a>3</a><a>4</a><a>5</a><a class="next">下一页</a>
    </div>

</div>
</body>
</html>
